<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" class="header-left" size="30" @click="goBack"/>
      订单详情
      <StatusBar :item="stateValueMap[statusMap[orderDetail.status]]" />
      <div class="tips">

        <div class="dzf" v-if="orderDetail.status==1 && second>0" >
          <div class="text1">订单待支付</div>
          <div class="text2">
            请在
            <counter :second="second" />
            内完成支付，超时订单自动取消
          </div>
          <div class="text3">
            <van-button type="success" @click="onPayClick">立即支付1元</van-button>
          </div>
        </div>
        <div class="dzf" v-if="orderDetail.status==1 && second<0" >
          <div class="text1">订单超时未支付，已自动取消</div>
        </div>
        <div class="dzf" v-if="orderDetail.status==2" >
          <div class="text1">正在为您安排服务专员...</div>
          <div class="text2">请保持手机畅通，稍后工作人员联系</div>
        </div>
        <div class="dzf" v-if="orderDetail.status==3" >
          <div class="text1">服务已完成</div>
          <div class="text2">感谢您的使用</div>
        </div>
        <div class="dzf" v-if="orderDetail.status==4" >
          <div class="text1">订单已取消</div>
        </div>

      </div>

    </div>
    <van-cell-group class="card">
      <div class="header-text">
        预约信息
      </div>
      <van-cell v-for="(item,key) in makeInfo"
                :key="key"
                :title="item"
                :value="formatData(key)"
      >
      </van-cell>
    </van-cell-group>

    <van-cell-group class="card">
      <div class="header-text">
        订单信息
      </div>
      <van-cell
          v-for="(item,key) in orderInfo"
                :key="key"
                :title="item"
                :value="formatData(key)"
      >

      </van-cell>
    </van-cell-group>
    <!-- 支付二维码弹窗 -->
    <van-dialog v-model:show="showCode" title="" :show-confirm-button="false">
      <van-icon name="cross" class="close" @click="closeCode"></van-icon>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="codeImg" />
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>

  </div>
</template>

<script setup>
import { useRouter, useRoute} from 'vue-router'
import StatusBar from "../../components/statusBar.vue"
import {getCurrentInstance, onMounted, reactive, computed, ref} from "vue";
import counter from '../../components/counter.vue'
import Counter from "../../components/counter.vue";
import QrCode from 'qrcode'

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
// 页面数据
const orderDetail = reactive({});
// 计算倒计时
const second = computed(()=>{
  const dateTimeStr = orderDetail.createTime.trim();
  if (dateTimeStr) {
    const timestamp = new Date(dateTimeStr).getTime();
    const timer = timestamp + 7200000 - Date.now();
    console.log(timer);
    return timer;
  }
  return null;

})

const statusMap = {
  1 : '待支付',
  2 : '待服务',
  3 : '已完成',
  4 : '已取消'
}

const stateValueMap = {
  '待支付': 10,
  '待服务': 20,
  '已完成': 30,
  '已取消': 40
}

// 订单详情
const makeInfo = {
  service_name: "预约服务",
  hospitalName: "就诊医院",
  startTime:'期望就诊时间',
  account:'就诊人',
  //client_phone:'就诊人电话',
  receiveAddress:'接送地址',
  demand:'其他需求'
}
const orderInfo = {
  contact:'联系电话',
  createTime:'下单时间',
  price:'应付金额',
  code:'订单编号'
}
// 点击返回
const goBack = () => {
  router.go(-1);
}

onMounted(async () => {

  // 订单详情
  const { data } = await proxy.$api.orderDetail({orderId: route.query.orderId});
  Object.assign(orderDetail, data.data);
  console.log('order_detail',orderDetail);
});

const showCode = ref(false);
const codeImg = ref('');
// 关闭弹窗
const closeCode = () => {
  showCode.value = false;
}
// 点击立即支付
const onPayClick = () =>{
  showCode.value = true;
  QrCode.toDataURL(orderDetail.payLink).then((url)=>{
    showCode.value = true;
    codeImg.value = url;
  })
}
const formatData = (key) => {
  if (key.indexOf(".") === -1) {
    // 时间戳转日期
    if (key === "startTime") {
      return formatTimestamp(orderDetail[key]);
    }
    if (key == "service_name"){
      return "就医尊享";
    }
    if (key == "price"){
      return "0.5元";
    }
    return orderDetail[key];
  }
  let arr = key.split(".").reduce((o, p) => {
    return (o || {})[p];
  }, orderDetail);
  return arr;
}
function formatTimestamp(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}
</script>

<style lang="less" scoped>

  .container {
    background-color: #f0f0f0;
    height: 100vh;
  }
  .header {
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    .header-left {
      float: left;
    }
  }
  .card {
    margin: 15px 0;
    padding: 10px;
    .header-text {
      padding-left: 5px;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      border-left: 4px solid red;
    }
  }
  .dzf {
    padding: 20px;
    .text1 {
      text-align: left;
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
      color: #666;
    }
    .text2 {
      text-align: left;
      font-size: 14px;
      color: #666;
    }
    .text3 {
      text-align: center;
      .van-button {
        margin-top: 10px;
        margin-left: 10px;
        width: 80%;
        font-weight: bold;
      }
    }
  }
  ::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;
    .close {
      position: absolute;
      left: 20px;
    }
  }

</style>
